<template>
  <page-header-wrapper>
    <a-card>
      <GzSearchForm v-if="$access('ENT_SYS_LOG_SEARCH')" :searchFunc="queryhFunc" :resetFunc="() => { vdata.searchData= {} }">
        <a-form-item label="" class="table-search-item">
          <GzDateRangePicker 
            v-model:value="vdata.searchData['queryDateRange']" 
            v-model:isIncludeToday="vdata.searchData['isIncludeToday']" 
            customDateRangeType="date"
          />
        </a-form-item>
        <gz-text-up v-model:value="vdata.searchData.userId" :placeholder="'用户ID'" :msg="vdata.searchData.userId" />
        <gz-text-up v-model:value="vdata.searchData.userName" :placeholder="'用户名'" :msg="vdata.searchData.userName" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.sysType" placeholder="所属系统">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="MANAGER">
              运营平台
            </a-select-option>
            <a-select-option value="PROXY">
              机构系统
            </a-select-option>
            <!-- <a-select-option value="MCH">
              商户系统
            </a-select-option> -->
          </a-select>
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"  
        row-key="sysLogId"
        
        :row-selection="{ onChange: onSelectChange }"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_SYS_LOG_DEL')" type="danger" class="mg-b-30" @click="delFunc">
              <DeleteOutlined />删除
            </a-button>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'userName'">
            <b>{{ record.userName }}</b>
          </template>

          <template v-if="column.key === 'sysType'">
            <a-tag :key="record.sysType" :color="record.sysType === 'MANAGER'?'green':record.sysType === 'MCH'?'geekblue':record.sysType === 'PROXY'?'cyan':'loser'">
              {{ record.sysType === 'MANAGER'?'运营平台':record.sysType === 'MCH'?'商户系统':record.sysType === 'PROXY'?'机构系统':'其他' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'op'">
            <a-button v-if="$access('ENT_SYS_LOG_VIEW')" type="link" @click="detailFunc(record.sysLogId)">详情</a-button>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 日志详情抽屉 -->
    <template>
      <a-drawer
        width="40%"
        placement="right"
        :closable="true"
        :visible="visible"
        :title="visible === true? '日志详情':''"
        @close="onClose"
      >
        <a-row justify="space-between" type="flex">
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="用户ID">
                {{ vdata.detailData.userId }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="用户IP">
                {{ vdata.detailData.userIp }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="用户名">
                <b>
                  {{ vdata.detailData.userName }}
                </b>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="所属系统">
                <a-tag :key="vdata.detailData.sysType" :color="vdata.detailData.sysType === 'MANAGER'?'green':vdata.detailData.sysType === 'MCH'?'geekblue':vdata.detailData.sysType === 'PROXY'?'cyan':'loser'">
                  {{ vdata.detailData.sysType === 'MANAGER'?'运营平台':vdata.detailData.sysType === 'MCH'?'商户系统':vdata.detailData.sysType === 'PROXY'?'机构系统':'其他' }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-divider />
        <a-row justify="space-between" type="flex">
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="操作描述">
                {{ vdata.detailData.methodRemark }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="请求方法">
                {{ vdata.detailData.methodName }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="请求地址">
                {{ vdata.detailData.reqUrl }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-row justify="start" type="flex">
          <a-col :sm="24">
            <a-form-item label="请求参数">
              <a-textarea
                v-model:value="vdata.detailData.optReqParam"
               
                disabled="disabled"
                style="background-color: black;color: #FFFFFF;height: 100px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row justify="start" type="flex">
          <a-col :sm="24">
            <a-form-item label="响应参数">
              <a-textarea
                v-model:value="vdata.detailData.optResInfo"
                
                disabled="disabled"
                style="background-color: black;color: #FFFFFF;height: 150px"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-drawer>
    </template>
  </page-header-wrapper>
</template>

<script setup lang="ts">
import {$getApiSysLog,$ApiSysLogList,$delApiSysLog} from '@/api/sysManage/sysLog/index'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { message,Modal } from 'ant-design-vue'

// 导入全局函数
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const infoTable = ref()

// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  { key: 'userName', title: '用户名', fixed: 'left' },
  { key: 'userId', title: '用户ID', dataIndex: 'userId' },
  { key: 'userIp', title: '用户IP', dataIndex: 'userIp' },
  { key: 'sysType', title: '所属系统'},
  { key: 'methodRemark', title: '操作描述', ellipsis: true, dataIndex: 'methodRemark' },
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
  { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center' }
])

const vdata = reactive({
  searchData: { queryDateRange: 'today', isIncludeToday: true } as any, // 搜索条件
  detailData: {} as any,
  selectedIds:[] as any,
  btnLoading:false
})

      let createdStart = '' // 选择开始时间
      let createdEnd = '' // 选择结束时间
      let visible = ref(false)

    // 请求table接口数据
    function reqTableDataFunc (params) {
      return $ApiSysLogList(params)
    }
function delFunc () {
      if (vdata.selectedIds.length === 0) {
        message.error('请选择要删除的日志')
        return false
      }
      Modal.confirm({
        title: '确认删除' + vdata.selectedIds.length + '条日志吗？',
        okType: 'danger',
        onOk () {        
          $delApiSysLog(vdata.selectedIds).then(res => {
            vdata.selectedIds = [] // 清空选中数组
            infoTable.value.refTable(true)
            $infoBox.message.success('删除成功')
          })
        },
        })
    }
function detailFunc (recordId) {
  $getApiSysLog(recordId).then(res => {
        vdata.detailData = res
      })
      visible.value = true
    }
       
        function onClose () {
          visible.value = false
    }
        function queryhFunc () {
       vdata.btnLoading = true
      infoTable.value.refTable(true)
    }
  // 多选函数
  function onSelectChange(selectedRowKeys, selectedRows){
      vdata.selectedIds = []
    
      selectedRows.forEach(e => {  
        vdata.selectedIds.push(e.sysLogId)
      })
    }
</script>
